<template>
  <div>
    <div class="page-content-forms">
        <a-space>
            <div>
                <label>姓名：</label>
                <a-input 
                placeholder="" 
                style="width: 220px"
                v-model="vSearch.name"
                allowClear
                size="small"
                @change="name_change"
                />
            </div>
            <div >
            <a-button type="primary" @click="ClickSearch" >查询</a-button>
            </div>
            <div >
              <a-button type="primary" @click="Add_expert" >添加</a-button>
            </div>
            <div >
              <a-button type="primary" @click="export_expert" >导出</a-button>
            </div>
        </a-space>
    </div>
    <div class="page-content-table expert-table" style="width:1200px">
        <a-table 
        :columns="expert_columns" 
        :data-source="expert_data" 
        bordered 
        :pagination="false"  
        size="small"
        rowKey="_id"
        :row-selection="rowSelection"
        >
        <span slot="operation" slot-scope="text, record">
          <a-dropdown :trigger="['click']">
              <p class="header-right-name ant-dropdown-trigger" @click="dropdown_click"  style="cursor: pointer;">操作</p>
              <a-menu slot="overlay" mode="inline">
                  <a-menu-item >
                    <a-button type="link"  @click="edit_expert(record)">编辑</a-button>
                  </a-menu-item>
                  <a-menu-item >
                    <a-button type="link"  @click="delete_expert(record)">删除</a-button>
                  </a-menu-item>
              </a-menu>
          </a-dropdown>
        </span>
        </a-table>
    </div>
    <a-modal v-model="add_expert_visible" title="添加" 
      @ok="add_expert_ok"
      :maskClosable="false"
      okText="添加"
      okType="dashed"
      :destroyOnClose="true"
      cancelText='取消'
      cancelokType="dashed"
      @cancel="add_expert_cancle"
    >
    <a-row>
      <a-form :form="form" :label-col="{ span:6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="姓名：">
          <a-input placeholder="" style="width: 220px" v-model="add_expert_data.name"></a-input>
        </a-form-item>
        <a-form-item label="工作单位：">
          <a-input placeholder="" style="width: 220px" v-model="add_expert_data.work" allowClear size="small"/>
        </a-form-item>
        <a-form-item label="身份证：">
          <a-input placeholder="" style="width: 220px" v-model="add_expert_data.personid" allowClear size="small"/>
        </a-form-item>
        <a-form-item label="职称：">
          <a-input placeholder="" style="width: 220px" v-model="add_expert_data.zhic" allowClear size="small"/>
        </a-form-item>
        <a-form-item label="电话：">
          <a-input placeholder="" style="width: 220px" v-model="add_expert_data.phone" allowClear size="small"/>
        </a-form-item>
        <a-form-item label="银行账号：">
          <a-input placeholder="" style="width: 220px" v-model="add_expert_data.bankaccount" allowClear size="small"/>
        </a-form-item>
        <a-form-item label="开户行：">
          <a-input placeholder="" style="width: 220px" v-model="add_expert_data.Bankofdeposit" allowClear size="small"/>
        </a-form-item>
      </a-form>
    </a-row>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
        expert_columns:[
          {
            title: '姓名',
            dataIndex: 'name',
            width:100,
            align:'center'
          },
          {
            title: '工作单位',
            dataIndex: 'work',
            width:200,
            align:'center',
            ellipsis:true
          },
          {
            title: '身份证',
            dataIndex: 'personid',
            width:120,
            align:'center'
          },
          {
            title: '职称',
            dataIndex: 'zhic',
            width:80,
            align:'center'
          },
          {
            title: '电话',
            dataIndex: 'phone',
            width:100,
            align:'center'
          },
          {
            title: '银行账号',
            dataIndex: 'bankaccount',
            width:130,
            align:'center'
          },
          {
            title: '开户行',
            dataIndex: 'Bankofdeposit',
            width:150,
            align:'center',
            ellipsis:true
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'operation' } ,
            width:50,
            align:'center',
          },
        ],

        vSearch:{
          name:"",
          work:"",
          personid:"",
          phone:"",
        },
        expert_data:[],
        rowSelection : {
          onSelect: (record, selected, selectedRows) => {
            this.selectedRows=selectedRows
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            this.selectedRows=selectedRows
          },
        },
        add_expert_visible:false,
        add_expert_data:{},
        form: this.$form.createForm(this, { name: 'form' }),
    }
  },
  methods: {
    GetMoneyType(_type){
        let _index=this.money_types.findIndex((_value)=>{
            return _value.type==_type
        })
        if(_index>=0){
            return this.money_types[_index].name
        }
        else{
            return ''
        }
    },
    ClickSearch(){
      this.search();
    },
    money_type_Change(){
      this.search();
    },
    search(pagenum=1){
      // 、、https://nmgwxyy.cn/alatan/static/change/get_expert
      this.expert_data=[]
      let qs={}
      if(this.vSearch.name){
        qs["name"]=this.vSearch.name
      }
      if(this.vSearch.work){
        qs["work"]=this.vSearch.work
      }
      if(this.vSearch.personid){
        qs["personid"]=this.vSearch.personid
      }
      if(this.vSearch.phone){
        qs["phone"]=this.vSearch.phone
      }
      this.$common_apis.axios_get("/get_expert?",qs,true).then(result => {
        if(result){
          // result.forEach((_featrue,index)=>{
          //   _featrue.key=index+1
          // })
          this.expert_data=result
          // this.task_pagination.total=result.page.count
        }
      });
    },
     Add_expert(){
      this.add_expert_data={
          name:"",
          work:"",
          personid:"",
          zhic:"",
          phone:"",
          bankaccount:"",
          Bankofdeposit:"",
      }
      this.Add_expert_fun()
    },
    async Add_expert_fun(){
      this.add_expert_visible=true
      let Waitadd_expert =new Promise((resolve)=>{this.add_expert_resolve=resolve;});
      let _Waitadd_expert=await Waitadd_expert
      if(_Waitadd_expert){
        
        if(_Waitadd_expert["_id"]){
          _Waitadd_expert["id"]=_Waitadd_expert["_id"]
          delete _Waitadd_expert["_id"]
          delete _Waitadd_expert["__v"]
        }
        console.log(_Waitadd_expert)
        this.$common_apis.axios_post("/add_expert?",_Waitadd_expert,true).then(res => {
          if (res) {this.search();}
        });
        return true
      }
      return false
    },
    add_expert_ok(){
      if(!this.add_expert_data.name && !this.add_expert_data.personid && !this.add_expert_data.phone){
        this.$message.info('至少要指定姓名 手机号 身份中的一个');
      }
      else{
        this.add_expert_resolve(this.add_expert_data);
        this.add_expert_visible=false
      }
    },
    add_expert_cancle(){
      this.add_expert_visible=false
      this.add_expert_resolve(false);
    },
    edit_expert(record){
      this.add_expert_data=Object.assign({
          name:"",
          work:"",
          personid:"",
          zhic:"",
          phone:"",
          bankaccount:"",
          Bankofdeposit:"",
      },record)
      this.Add_expert_fun()
    },
    async delete_expert(record){
      this.$common_apis.axios_post("/delete_expert?",{
        "id":record["_id"]
      },true).then(res => {
          if (res) {
            this.search();
          }
        });
    },
    export_expert(){
      let keys=["name","work","personid","zhic","phone", "bankaccount","Bankofdeposit"]
      let str = `姓名,工作单位,身份证,职称,电话,银行账号,开户行\n`;
      for (let i = 0; i < this.selectedRows.length; i++) {
        let one_data=this.selectedRows[i]
        for (let j = 0; j < keys.length; j++) {
          let one_key=keys[j]
          str += `${one_data[one_key] + "\t"},`;
        }
      str += "\n";
    }
    // encodeURIComponent解决中文乱码
    const uri ="data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
    // 通过创建a标签实现
    const link = document.createElement("a");
    link.href = uri;
    // 对下载的文件命名
    link.download = "导出.csv";
    link.click();
    },
  },
}
</script>
<style>
.expert-table td{
  font-size: 12px;
}
</style>